<template>
  <a-modal
    v-model:open="visible"
    title="批量设置"
    width="500px"
    @ok="handleSave"
    @cancel="handleCancel"
  >
    <div class="batch-info">
      <p>已选择 {{ selectedRows.length }} 个商品</p>
    </div>

    <a-form layout="vertical">
      <a-form-item label="参与折扣">
        <a-select
          v-model:value="settings.participateDiscount"
          placeholder="保持原状"
        >
          <a-select-option value="keep">保持原状</a-select-option>
          <a-select-option value="true">是</a-select-option>
          <a-select-option value="false">否</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="计算库存">
        <a-select
          v-model:value="settings.calculateInventory"
          placeholder="保持原状"
        >
          <a-select-option value="keep">保持原状</a-select-option>
          <a-select-option value="true">是</a-select-option>
          <a-select-option value="false">否</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="有无批号">
        <a-select
          v-model:value="settings.hasBatchNumber"
          placeholder="保持原状"
        >
          <a-select-option value="keep">保持原状</a-select-option>
          <a-select-option value="true">有</a-select-option>
          <a-select-option value="false">无</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="用量计算">
        <a-select
          v-model:value="settings.dosageCalculation"
          placeholder="保持原状"
        >
          <a-select-option value="keep">保持原状</a-select-option>
          <a-select-option value="true">启用</a-select-option>
          <a-select-option value="false">禁用</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>

    <div class="batch-note">
      <p class="note-text">批量设置内容</p>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { message } from 'ant-design-vue';

// 定义props
interface Props {
  visible: boolean;
  selectedRows: any[];
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  selectedRows: [],
});

// 定义emits
const emit = defineEmits<{
  'update:visible': [value: boolean];
  save: [settings: any]
}>();

// 响应式数据
const settings = reactive({
  participateDiscount: 'keep',
  calculateInventory: 'keep',
  hasBatchNumber: 'keep',
  dosageCalculation: 'keep',
});

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

// 方法
const handleSave = () => {
  // 过滤掉保持原状的设置
  const actualSettings = Object.entries(settings).reduce(
    (acc, [key, value]) => {
      if (value !== 'keep') {
        acc[key] = value === 'true';
      }
      return acc;
    },
    {} as Record<string, boolean>,
  );

  if (Object.keys(actualSettings).length === 0) {
    message.warning('请至少选择一个设置项');
    return;
  }

  emit('save', {
    settings: actualSettings,
    selectedRows: props.selectedRows,
  });
  message.success('批量设置成功');
  visible.value = false;
};

const handleCancel = () => {
  visible.value = false;
};
</script>

<style scoped>
.batch-info {
  padding: 12px;
  margin-bottom: 16px;
  background: #f0f9ff;
  border-left: 4px solid #1890ff;
  border-radius: 4px;
}

.batch-note {
  padding: 12px;
  margin-top: 16px;
  background: #fff2e8;
  border: 1px solid #ffbb96;
  border-radius: 4px;
}

.note-text {
  margin: 0;
  font-size: 14px;
  color: #d46b08;
}
</style>
